<template>
    <div :style="{height : h}" class="mian">
        <header-1 class="d1">
            <template v-slot:center>
               <span class="center">
                    活动报名
               </span>
            </template>
        </header-1>
        <div class="middle">
            <div class="middle_1">
                    <span class="middle_2">支付项目</span>
                <div class="middle_3">
                    <span>营销活动</span>
                    <span class="middle_4">{{obj.acName}}</span>
                </div>
                <div class="middle_3">
                    <span>报名费用</span>
                    <span class="middle_5">{{obj.applicationExp}}</span>
                </div>
            </div>
        </div>
        <div class="last">
            <div class="last1">
                <span class="last2">支付方式</span>
                <div>
                    <div class="last3">
                    <span>账户余额</span>
                    <span class="last4">₱1400.59</span>
                </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <span>余额不足?</span>
            <span class="foot_1">我要充值></span>
        </div>
        <div class="btn" @click="pay">
            去支付
        </div>
        <pwd class="pwd" v-show="pwdstate" @cancel="cancel" @zf="zf"></pwd>
    </div>
</template>
<script>
import pwd from '../../components/BS/PwdView.vue'  
import header1 from '../../components/BS/header1View.vue'
import { Toast } from 'vant';
export default {
    data(){
        return{
            h : '',
            obj: '',
            pwdstate: false
        }
    },
    components:{
        header1,
        pwd
    },
    created(){
        this.h = window.innerHeight + 'px'
        this.obj = this.$route.query.name
        console.log(this.$route.query.name)
    },
    methods:{
        cancel(){
            this.pwdstate = false
        },
        pay(){
            this.pwdstate = true
        },
        zf(){
            let that = this
            Toast.success({
                message:'报名成功',
                duration:1000,
                onClose(){
                    that.$router.push('/okavi')
                }
            });
            this.pwdstate = true
        }
    }
}
</script>
<style scoped>  
.mian{
    background-color: #f5f5f5;
}
.middle{
    width: 90%;
    height: 150px;
    margin: 20PX auto;
    background-color: #FFFFFF;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}
.middle_1{
    width: 90%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.middle_2{
    font-weight: bold;
}
.middle_3{
    display: flex;
    justify-content: space-between;
}
.middle_4{
    color: #797b93;
}
.middle_5{
    color: #ff0000;
}
.last{
    width: 90%;
    height: 100px;
    margin: 20PX auto;
    background-color: #FFFFFF;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}
.last1{
    width: 90%;
    height: 80%;

}
.last2{
    font-weight: bold;
}
.last3{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.last4{
    color: #797b93;
}
.foot{
    display: flex;
    width: 90%;
    margin: 0 auto;
    font-size: 10px;
}
.foot_1{
    color: #fd6e53;
    margin-left: 5px;
}
.btn{
    width: 90%;
    height: 50px;
    margin: 20px auto;
    background-color:#ff6e53 ;
    border-radius: 30px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    color: #FFFFFF;
}
.pwd{
    position: fixed;
    top: 0;
    z-index: 1;
}
</style>